<template>
  <div class="job-page resume-page resume-preview">
    <div id="pdfDom">
      <div class="job-page-center">
        <div class="job-content resume-content">
          <div class="job-box resume-head-name">
            <div style="padding:25px 0 0 0;">
              <img :src="data.resumeTalentInfo.image" width="105px" height="105px" alt id="head">
              <!--              <img src="@/assets/img/1.jpg" width="105px" height="105px" alt id="head">-->
              <div class="infomation-right primary-text">
                <el-row class="infomation-name">
                  {{data.resumeTalentInfo.talentName ? data.resumeTalentInfo.talentName : '---'}}
                  <span
                    class="work-label-sta"
                  >{{data.resumeTalentInfo.jobStateContent ? data.resumeTalentInfo.jobStateContent : '---'}}</span>
                </el-row>
                <el-row class="infomation-details">
                  <span style="display:flex;align-items: center;">
                    <img src="../../assets/img/resume/nianling.png" alt>
                    {{data.resumeTalentInfo.talentAge ? data.resumeTalentInfo.talentAge + '岁' : '---'}}
                  </span>
                  <span style="padding:0 30px;">|</span>
                  <span style="display:flex;align-items: center;">
                    <img src="../../assets/img/resume/time.png" height="15px" alt>
                    {{data.resumeTalentInfo.workDay ? data.resumeTalentInfo.workDay + '年经验' : '---'}}
                  </span>
                  <span style="padding:0 30px;">|</span>
                  <span style="display:flex;align-items: center;">
                    <img src="../../assets/img/resume/dingwei.png" height="16px" alt>
                    {{data.resumeTalentInfo.workCity ? data.resumeTalentInfo.workCity : '---'}}
                  </span>
                  <span style="padding:0 30px;">|</span>
                  <span style="display:flex;align-items: center;">
                    <img src="../../assets/img/resume/xinzi.png" height="14px" alt>
                    <span v-if="data.resumeTalentInfo.tax == 0">税前&nbsp;</span>
                    <span v-if="data.resumeTalentInfo.tax == 1">税后&nbsp;</span>
                    {{data.resumeTalentInfo.salaryPerMonth ? data.resumeTalentInfo.salaryPerMonth +'W': '---'}}/
                    <span
                      style="color:#666;font-size:12px;"
                    >{{data.resumeTalentInfo.monthCount ? data.resumeTalentInfo.monthCount + '年' : '---'}}</span>
                  </span>

                  <!-- <el-col :span="3">
                    <img src="../../assets/img/resume/nianling.png" alt>
                    {{data.resumeTalentInfo.talentAge ? data.resumeTalentInfo.talentAge +'岁' : '---'}}
                  </el-col>
                  <el-col :span="5" class="col-ju-center">
                    <img src="../../assets/img/resume/time.png" height="15px" alt>
                    {{data.resumeTalentInfo.workDay ? data.resumeTalentInfo.workDay +'年经验' : '---'}}
                  </el-col>
                  <el-col :span="5" class="col-ju-center">
                    <img src="../../assets/img/resume/dingwei.png" height="16px" alt>
                    {{data.resumeTalentInfo.workCity ? data.resumeTalentInfo.workCity : '---'}}
                  </el-col>
                  <el-col :span="7" class="border-none col-ju-center">
                    <img src="../../assets/img/resume/xinzi.png" height="14px" alt>
                    {{data.resumeTalentInfo.salaryPerMonth ? data.resumeTalentInfo.salaryPerMonth +'W/' : '---'}} {{data.resumeTalentInfo.monthCount ? data.resumeTalentInfo.monthCount +'年经验' : '---'}}
                  </el-col>-->
                </el-row>
                <el-row class="infomation-details">
                  <span style="display:flex;align-items: center;">
                    <img src="../../assets/img/resume/phone.png" alt>
                    {{data.resumeTalentInfo.phoneNumber ? data.resumeTalentInfo.phoneNumber : '---'}}
                  </span>
                  <span style="padding:0 30px;">|</span>
                  <span style="display:flex;align-items: center;">
                    <img src="../../assets/img/resume/youxiang.png" height="12px" alt>
                    {{data.resumeTalentInfo.email ? data.resumeTalentInfo.email : '---'}}
                  </span>

                  <!-- <el-col :span="5">
                    <img src="../../assets/img/resume/phone.png" alt>
                    {{data.resumeTalentInfo.phoneNumber ? data.resumeTalentInfo.phoneNumber : '---'}}
                  </el-col>
                  <el-col
                    :span="9"
                    class="border-none col-ju-center"
                    style="display:flex;align-items:center;"
                  >
                    <img src="../../assets/img/resume/youxiang.png" height="12px" alt>
                    {{data.resumeTalentInfo.email ? data.resumeTalentInfo.email : '---'}}
                  </el-col>-->
                </el-row>
              </div>
            </div>
          </div>
          <div class="job-box resume-head-content">
            <div class="all-job-resume">
              <div class="all-job-resume-head">
                <el-col :span="23">
                  <span class="all-job-resume-line"></span>
                  期望职位
                  <span class="all-job-resume-sub-text">必填</span>
                </el-col>
              </div>
              <div
                class="job-intention primary-text"
                v-for="(item,index) in data.resumeJobIntention"
                :key="index"
              >
                <div style="display:flex;justify-content: flex-start;">
                  <div style="margin:0 30px 0 0;display: flex;align-items: center;">
                    <img src="../../assets/img/resume/dingwei.png" alt>
                    {{item.hopeCity ? item.hopeCity : '---'}}
                    <!-- 武汉 -->
                  </div>
                  <div style="margin:0 30px 0 0;display: flex;align-items: center;">
                    <img src="../../assets/img/resume/zhiyeleixin.png" alt>
                    {{item.parentLicenseType}}-{{item.sonLicenseType}}
                    <!-- 执业类型 -->
                  </div>
                  <div style="margin:0 30px 0 0;display: flex;align-items: center;">
                    <img src="../../assets/img/resume/qiyeleixing.png" alt>
                    {{item.hopeCompanyType ? item.hopeCompanyType : '---'}}
                    <!-- 企业类型 -->
                  </div>
                  <div style="margin:0 30px 0 0;display: flex;align-items: center;">
                    <img src="../../assets/img/resume/money.png" alt>
                    <span v-if="item.tax == 0">税前&nbsp;</span>
                    <span v-if="item.tax == 1">税后&nbsp;</span>
                    {{item.salaryPerMonthLow ? item.salaryPerMonthLow : '---'}}-{{item.salaryPerMonthHigh ? item.salaryPerMonthHigh + 'W': '---'}}/
                    <span
                      style="color:#666;font-size:12px;"
                    >{{item.monthCount ? item.monthCount+'年' :'---'}}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="all-job-resume">
              <div class="all-job-resume-head">
                <el-col :span="23">
                  <span class="all-job-resume-line"></span>
                  工作经历
                  <span class="all-job-resume-sub-text">必填</span>
                </el-col>
              </div>
              <div
                class="work-experience primary-text"
                v-for="(item,index) in data.resumeWorkExpList"
                :key="index"
              >
                <el-row>
                  <el-col :span="20" class="work-experience-head">
                    <!-- 公司名称公司名称公司名称 -->
                    {{item.companyName ? item.companyName :'---'}}
                    <span
                      class="work-experience-time"
                    >{{item.workStartTime ? item.workStartTime : '---'}} / {{item.workEndTime ? item.workEndTime : '---'}}</span>
                  </el-col>
                </el-row>
                <el-row style="padding:16px 0 19px 0">
                  <span>
                    <!-- 职位名称 -->
                    {{item.jobName ? item.jobName : '---'}}
                  </span>
                  <span style="padding:0 5px;">|</span>
                  <span>
                    <!-- 执业类型 -->
                    {{item.parentLicenseType}}-{{item.sonLicenseType}}
                  </span>
                  <span style="padding:0 5px;">|</span>
                  <span>
                    <!-- 企业类型 -->
                    {{item.companyType ?item.companyType:'---'}}
                  </span>
                  <span style="padding:0 5px;">|</span>
                  <span>
                    <!-- 所在地区 -->
                    {{item.workCity ? item.workCity : '---'}}
                  </span>
                </el-row>
                <el-row>
                  <p v-html="item.workContent"></p>
                </el-row>
              </div>
            </div>
            <div class="all-job-resume">
              <div class="all-job-resume-head">
                <el-col :span="23">
                  <span class="all-job-resume-line"></span>
                  项目经历
                  <span class="all-job-resume-sub-text">必填</span>
                </el-col>
              </div>
              <div
                class="work-experience primary-text"
                v-for="(item,index) in data.resumeProjectExpList"
                :key="index">
                <el-row>
                  <el-col :span="20" class="work-experience-head">
                    <!-- 项目名称项目名称项目名称 -->
                    {{item.projectName}}
                    <span
                      class="work-experience-time"
                    >{{item.projectStartTime ? item.projectStartTime : '---'}} / {{item.projectEndTime ? item.projectEndTime : '---'}}</span>
                  </el-col>
                </el-row>
                <el-row style="padding:19px 0 0 0;">
                  <p v-html="item.projectContent"></p>
                </el-row>
              </div>
            </div>
            <div class="all-job-resume">
              <div class="all-job-resume-head">
                <el-col :span="23">
                  <span class="all-job-resume-line"></span>
                  执业证书
                  <span class="all-job-resume-sub-text">必填</span>
                </el-col>
              </div>
              <div
                class="work-experience primary-text"
                v-for="(item,index) in data.talentLicenseList"
                :key="index"
              >
                <el-row>
                  <el-col :span="24" class="work-experience-head">
                    <!-- 一级建造师 -->
                    {{item.parentLicenseType}}-{{item.sonLicenseType}}
                    <span
                      class="work-license"
                    >{{item.licenseNum}}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="all-job-resume">
              <div class="all-job-resume-head">
                <el-col :span="23">
                  <span class="all-job-resume-line"></span>
                  教育经历
                  <span class="all-job-resume-sub-text">必填</span>
                </el-col>
              </div>
              <div
                class="work-experience primary-text"
                v-for="(item,index) in data.resumeEducationExpList"
                :key="index">
                <el-row>
                  <el-col :span="20" class="work-experience-head">
                    <!-- 大学名称大学名称大学名称 -->
                    {{item.school}}
                    <span
                      class="work-experience-time"
                    >{{item.startTime ? item.startTime : '---'}} / {{item.endTime ? item.endTime :'---'}}</span>
                  </el-col>
                </el-row>
                <el-row style="padding:16px 0 19px 0">
                  <span>
                    <!--专业名称-->
                    {{item.major ? item.major : '---'}}
                  </span>
                  <span class="line-padding">|</span>
                  <span>
                    <!--本科-->
                    {{item.academicType ? item.academicType : '---'}}
                  </span>
                </el-row>
              </div>
            </div>
            <div class="all-job-resume">
              <div class="all-job-resume-head">
                <el-col :span="23">
                  <span class="all-job-resume-line"></span>
                  职称
                </el-col>
              </div>
              <div class="bright-tag">
                <el-tag v-for="(item,index) in data.talentTitleList.titleName" :key="index">{{item}}</el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="resume-preview-footer">
      <div class="resume-preview-footer-center">
        <!-- <div class="preview-button" @click="getPdf('#pdfDom')">
          <img src="../../assets/img/dowmload.png">下载简历
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        resumeEducationExpList: [],
        resumeJobIntention: [],
        resumeProjectExpList: [],
        resumeTalentInfo: {},
        resumeWorkExpList: [],
        talentLicenseList: [],
        talentTitleList: []
      },
      base64: '',
      htmlTitle: '我的简历'
    }
  },
  methods: {
    initData() {
      _g.apiPost('/talent/initResumePage.do', {}).then(res => {
        //_g.toMessage(res)
        this.data = res.data
        // var img = new Image()
        // img.crossOrigin = 'anonymous';
        // img.src = this.data.resumeTalentInfo.image+"?timeStamp="+new Date();
        // img.onload = () => {
        //   this.base64 = this.getBase64Image(img)
        // }
        // this.downLoadImg(this.data.attachResume, res => {
        //   this.base64 = res
        // })
        // var canvas = document.createElement('canvas')
        // var ctx = canvas.getContext('2d')
        //
        // canvas.width = 100
        // canvas.height = 100
        // var img = new Image()
        // //设置图片跨域访问
        // img.crossOrigin = 'anonymous'
        // //加时间戳解决跨域问题
        // img.src =
        //   this.data.resumeTalentInfo.image +
        //   '&timeStamp=' +
        //   new Date().getTime()
        // document.body.appendChild(img)
        // img.onload = function() {
        //   ctx.drawImage(this, 0, 0, 100, 100)
        //   var base64 = canvas.toDataURL('image/jpg', 1)
        //   console.log(base64)
        // }
      })
    },
    getBase64Image(img) {
      var canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      var ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      // img.setAttribute('crossOrigin', 'anonymous')
      var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
      console.log(canvas)

      var dataURL = canvas.toDataURL('image/' + ext)
      return dataURL
    },
    downLoadImg(url, func) {
      var httpRequest = null
      if (window.XMLHttpRequest) {
        // 除了IE外的其它浏览器
        httpRequest = new XMLHttpRequest()
      } else {
        httpRequest = new ActiveXObject('MsXml2.XmlHttp')
      }
      httpRequest.responseType = 'blob'
      httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4) {
          if (httpRequest.status == 200) {
            var value = this.response
            console.log(value)
            // var blob = window.URL.createObjectURL(value);
            var reader = new window.FileReader()
            reader.readAsDataURL(value)
            reader.onloadend = function() {
              var base64data = reader.result
              console.log(base64data)
              if (func) {
                func(base64data)
              }
            }
          }
        }
      }
      httpRequest.open('GET', url, true)
      httpRequest.send(null)
    }
  },
  mounted() {
    this.initData()
  },
  components: {}
}
</script>

<style lang="scss">
.resume-preview {
  width: auto;
  height: auto;
  background: #f2f2f2;
  padding: 60px 0 90px 0;
  .resume-content {
    width: 900px !important;
    margin: 0 auto;
  }

  .resume-preview-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 78px;
    background: #fff;
    display: flex;
    justify-content: center;
    .resume-preview-footer-center {
      width: 900px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .preview-button {
        width: 160px;
        height: 40px;
        background: #f09338;
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
    }
  }
}
</style>
